Barrierefreie Webseite mit Vorlese-Navigation

Tastatur-Steuerung:
• Pfeil-Unten / Pfeil-Oben: Navigationspunkte (Seiten, H1-H3, Fußnoten, Kommentare) durchwandern.
• [ENTER]: Vorlesen ab dem gewählten Navigationspunkt starten.
• Leertaste: Start/Pause | Pfeil-Rechts / Pfeil-Links: Absatzweise springen | ESC: Stopp | H: Hilfe sprechen.

Seite 1

: Einführung in Hatha Yoga

Dies ist der einleitende Text der ersten Seite.

1. Die Grundlagen des Hatha Yoga

Hatha Yoga nutzt den Körper als Werkzeug zur Klärung des Geistes.

1.1 Die körperliche Ebene

Durch Asanas wird die Muskulatur gestärkt und der Beckenboden aktiviert.

Hinweis 1: Asanas sollten nie unter scharfen Schmerzen ausgeführt werden.

1.1.1 Atmung (Pranayama)

Der Atem führt die Bewegung.

User-Kommentar: Dieser Abschnitt zur Atemführung ist sehr verständlich.

Seite 2: Die moderne Entwicklung

Hier beginnt die zweite Seite des Dokuments.

2. Yoga im 20. Jahrhundert

Krishnamacharya revolutionierte die Praxis durch Dynamik und Vinyasa-Kopplung.

2.1 Die Schüler Krishnamacharyas

B.K.S. Iyengar und Pattabhi Jois prägten zwei völlig unterschiedliche Stile.

Hinweis 2: Iyengar erfand den Einsatz von Blöcken und Gurten.
Die synth.cancel()-Falle: Der Sprach-Synthesizer des Browsers braucht manchmal ein paar Millisekunden, um die Audio-Queue wirklich zu leeren. Wenn man synth.cancel() aufruft, während im Hintergrund noch das onend- oder onerror-Event des vorherigen Satzes feuert, startet der Browser versehentlich sofort wieder den nächsten Satz.
Hier sind die zwei kleinen Fixes, um den Stop-Befehl abzusichern:
Fix 1: Stop-Funktion in tts-engine.js absichern
Ersetze in der tts-engine.js die Funktion stop und die interne Steuerung durch diesen "Hard Reset":
HOTFIX, wenn das stoppen nicht geht:

stop: () => { isPlaying = false; // 1. Alle Event-Listener vom aktuellen Utterance abkoppeln, // damit beim Stoppen nicht aus Versehen der nächste Satz anspringt! synth.pause(); synth.cancel(); // 2. Visuelle Hervorhebungen sofort entfernen document.querySelectorAll('.tts-active').forEach(el => el.classList.remove('tts-active')); // 3. Kurzer Sicherheits-Timeout für den Browser-Audio-Buffer setTimeout(() => { synth.cancel(); }, 50); }

2.

// In setupHotkeyListeners(): window.addEventListener('keydown', (e) => { if (['INPUT', 'SELECT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; // SOFORT-STOPP BEI ESCAPE (Ohne Enter-Bestätigung & e.preventDefault!) if (e.code === 'Escape' || e.code === 'KeyX') { // 'X' als alternative Taste, falls ESC vom Browser abgefangen wird e.preventDefault(); selectedHotkeyAction = null; TTSEngine.stop(); speakSystemFeedback("Gestoppt."); return; } // ... restliche Hotkey-Logik ... });
Fix 2: Ausweich-Hotkey & Event-Handling anpassenÄndere in der tts-engine.js im Bereich setupHotkeyListeners den Event-Handler für Escape:JavaScript// In setupHotkeyListeners(): window.addEventListener('keydown', (e) => { if (['INPUT', 'SELECT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; // SOFORT-STOPP BEI ESCAPE (Ohne Enter-Bestätigung & e.preventDefault!) if (e.code === 'Escape' || e.code === 'KeyX') { // 'X' als alternative Taste, falls ESC vom Browser abgefangen wird e.preventDefault(); selectedHotkeyAction = null; TTSEngine.stop(); speakSystemFeedback("Gestoppt."); return; } // ... restliche Hotkey-Logik ... }); Warum hilft das?Sofort-Ausführung: Stoppen muss immer auf den Punkt passieren. Durch die direkte Ausführung ohne selectedHotkeyAction entfällt die Verzögerung.Taste 'X' als Backup: Falls der Browser auf manchen Systemen Escape abfängt, kannst du jetzt auch einfach X drücken, um die Sprache augenblicklich einzufrieren.Probier die zwei Anpassungen kurz aus – danach sollte das Stoppen blitzschnell und ohne Nachlaufen greifen!